<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'家庭关系'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="437">
            <div class="analyItem">
                <p class="analyItemTit tx-center">家庭关系</p>
                <div class="analyItemCon" v-if="flg==1">
                                        <p class="col-md-4">
                                            <span class="cLightGray pr8">姓名</span>
                                            <span name="stage_info_family_name">{{ this.stageInfo.family_name ? this.stageInfo.family_name : '' }}</span>
                                        </p>
                                        <p class="col-md-4">
                                            <span class="cLightGray pr8">关系</span>
                                            <span name="stage_info_family_relation">{{ this.stageInfo.family_relation ? this.stageInfo.family_relation : '' }}</span>
                                        </p>
                                        <p class="col-md-4">
                                            <span class="cLightGray pr8">电话</span>
                                            <span name="stage_info_family_phone">{{ this.stageInfo.family_phone ? this.stageInfo.family_phone : '' }}</span>
                                        </p>
                                        <p class="col-md-4">
                                            <span class="cLightGray pr8">微信</span>
                                            <span name="stage_info_family_wechat">{{ this.stageInfo.family_wechat ? this.stageInfo.family_wechat : '' }}</span>
                                        </p>
                                        <p class="col-md-4">
                                            <span class="cLightGray pr8">性别</span>
                                            <span name="stage_info_family_sex">{{ this.stageInfo.family_sex ? (this.stageInfo.family_sex === 0 ? '女' : '男') : '' }}</span>
                                        </p>
                                        <div class="imgbox imgbox1 col-md-3"  style="margin-top: 15px;">
                                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="flg=0">
                                    </div>
                </div>
                   <div class="analyItemCon" v-else>
                            <div class="textBoxtxt hide" style="display: block;">
                                            <p class="col-md-4">
                                                <span class="cLightGray pr8">姓名</span>
                                                <input type="text" class="width120 evaluateStandard" name="set_stage_info_family_name" v-model="familyName">
                                            </p>
                                            <p class="col-md-4">
                                                <span class="cLightGray pr8">关系</span>
                                                <input type="text" class="width120 evaluateStandard" name="set_stage_info_family_relation" v-model="familyRelation">
                                            </p>
                                            <p class="col-md-4">
                                                <span class="cLightGray pr8">电话</span>
                                                <input type="text" class="width120 evaluateStandard" name="set_stage_info_family_phone" v-model="familyPhone">
                                            </p>
                                            <p class="col-md-4" style="padding-top: 10px;">
                                                <span class="cLightGray pr8">微信</span>
                                                <input type="text" class="width80 evaluateStandard" name="set_stage_info_family_wechat" v-model="familyWechat">
                                            </p>
                                            <p class="col-md-4" style="padding-top: 10px;">
                                                <span class="cLightGray pr8">性别</span>
                                                <!--<input type="text" class="width120 evaluateStandard" name="set_userInfo_sex" value="">-->
                                                <select name="set_stage_info_family_sex" class="width80" v-model="familySex">
                                                    <option value="0">女</option>
                                                    <option value="1">男</option>
                                                </select>
                                            </p>
                                </div>
                        <div class="imgbox imgbox2 " style="margin-top: 42px;">
                            <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/save_img.png" title="保存" width="20" class="fl pointer mr5" name="update_stage_info_intention" @click="updateStageInfo()">
                            <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/goback_img.png" title="返回" width="20" class="fl pointer mr5" @click="flg=1">
                        </div>
                </div>
            </div>
        </div>

        <div class="layerRtb-footer">
              <div class="analyItem">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">
                </div>
            </div>
        </div>
          <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
         </transition-group>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { updateStageInfoByleId } from '../../Resources/Api/index'
export default {
    components: {
    },
    data () {
        return {
            flg: 1,
            stageInfo: {}, // 用户信息
            familyName: '',
            familyRelation: '',
            familyPhone: '',
            familyWechat: '',
            familySex: ''
        }
    },
    created () {
        this.stageInfo = this.$route.query.stageInfo
        this.familyName = this.stageInfo.family_name
        this.familyRelation = this.stageInfo.family_relation
        this.familyPhone = this.stageInfo.family_phone
        this.familyWechat = this.stageInfo.family_wechat
        this.familySex = this.stageInfo.family_sex
    },
    methods: {
        // 认知阶段修改用户的家庭信息
        updateStageInfo () {
            if (this.familyName === null || this.familyName === '') {
                layer.msg('请输入家庭姓名')
                return
            }
            if (this.familyRelation === null || this.familyRelation === '') {
                layer.msg('请输入家庭姓名')
                return
            }
            if (this.familyPhone === null || this.familyPhone === '') {
                layer.msg('请输入家庭姓名')
                return
            }
            if (this.familyWechat === null || this.familyWechat === '') {
                layer.msg('请输入家庭姓名')
                return
            }
            updateStageInfoByleId({
                uid: this.leftInfo.uid, // 用户id
                familyName: this.familyName, // 年龄
                familyRelation: this.familyRelation, // 家庭关系，夫妻等
                familyPhone: this.familyPhone, // 手机号
                familyWechat: this.familyWechat, // 微信号
                familySex: this.familySex // 性别，0-女，1-男
            }).then(result => {
                // debugger
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('修改成功')
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log('认知阶段修改用户的年龄和婚姻状态失败，异常信息：' + err)
            })
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    watch: {
    }
}

</script>
<style  scoped>
    .imgbox {
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>
